<template>
    <div class="NewsPageBg">
      <div class="label">
        分类
        <div class="selectInput">
          <el-input v-model="queryParams.title" placeholder="请输入产品分类" />
        </div>
      </div>
      <div class="ClickBtnRow">
        <div class="AddBtn">
          <el-button type="primary" @click="addNewsClick">添加</el-button>
        </div>
        <div>
          <el-button type="primary" @click="getListPage">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </div>
      </div>
      <div class="ListBg">
        <el-table :data="state.list" style="width: 100%">
          <el-table-column prop="title" label="产品分类" />
          <el-table-column prop="name" label="产品名称" />
          <el-table-column prop="update_date" label="创建时间" align="center" />
          <el-table-column label="操作" align="center" min-width="40" fixed="right">
            <template #default="{row}">
              <el-button link type="primary" @click="openPage(row)">查看</el-button>
              <el-button link type="primary" @click="deleteRow(row)">删除</el-button>
              <el-button link type="primary" @click="UpdataRow(row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          :total="state.total"
          v-model:page="queryParams.page"
          v-model:limit="queryParams.limit"
          @pagination="getListPage"
        />
      </div>
  
      <!-- 新增 -->
      <ElDrawer v-model="AddDrawer" :z-index="2000" direction="ltr" size="60%">
        <div class="label" style="width: 700px; ">
          产品分类
          <div class="selectInput" style="width: 620px;">
            <el-input v-model="Params.title" placeholder="请输入产品分类" />
          </div>
        </div>
        <div class="label" style="width: 700px; ">
          产品名称
          <div class="selectInput" style="width: 620px;">
            <el-input v-model="Params.name" placeholder="请输入产品名称" />
          </div>
        </div>
        <div class="label" style="width: 700px; ">
          产品介绍
          <div class="selectInput" style="width: 620px;">
            <el-input v-model="Params.introduction" placeholder="请输入产品介绍" />
          </div>
        </div>
        <div class="label" style="width: 700px; justify-content: start;">
          产品主图
          <div class="selectInput" style="width: 620px;padding: 10px;">
            <el-upload
              v-model:file-list="introduction_banner1"
              action="https://xdcmt.com/oss/upload"
              :headers="Headers"
              :multiple="false"
              :data="UploadData"
              list-type="picture-card"
              :on-preview="introduction_handlePictureCardPreview"
              :on-success="introduction_handlePicturesSuccess"
              :on-remove="introduction_handleRemove"
            >
              <el-icon>
                <Plus />
              </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible0">
              <img w-full :src="dialogImageUrl0" alt="Preview Image" />
            </el-dialog>
          </div>
        </div>
        <div class="label" style="width: 700px; ">
          <span class="text-16px font-700">产品内容</span>
        </div>
        <div class="wangEditor">
          <WangEditor
            class="WangEditor"
            @select="getRich"
            ref="childrenRef"
            :editValue="AddEditValue"
          />
        </div>
        <template #footer>
          <el-button @click="sumbitClick" type="primary">提 交</el-button>
          <el-button @click="CloseDrawer">关 闭</el-button>
        </template>
      </ElDrawer>
  
      <!-- 查看 -->
      <ElDrawer v-model="drawer" :z-index="2000" direction="ltr" size="60%">
        <div class="label" style="width: 700px; ">
          产品分类
          <div class="selectInput" style="width: 620px;">
            <el-input v-model="title" placeholder="请输入产品标题" disabled/>
          </div>
        </div>
        <div class="label" style="width: 700px; ">
          产品名称
          <div class="selectInput" style="width: 620px;">
            <el-input v-model="productName" placeholder="请输入产品简介" disabled/>
          </div>
        </div>
        <div class="label" style="width: 700px; ">
          产品介绍
          <div class="selectInput" style="width: 620px;">
            <el-input v-model="introduction" placeholder="" disabled/>
          </div>
        </div>
        <div class="label" style="width: 700px; justify-content: start;">
          产品主图
          <div class="selectInput" style="width: 620px;padding: 10px;">
            <el-image style="width: 120px; height: 120px" :src="introduction_banner" :fit="fit" />
          </div>
        </div>
  
        <div class="label" style="width: 700px; ">
          <span class="text-16px font-700">产品内容</span>
        </div>
  
        <div class="wangEditor">
          <WangEditor class="WangEditor" @select="getRich" ref="childrenRef" :editValue="editValue" />
        </div>
      </ElDrawer>
    </div>
  </template>
  
  <script setup>
    import { getProductList,addProduct,updateProduct,deleteProduct } from "@/api/product/index";
    import { ElMessage } from 'element-plus'
    import UploadFile from "element-plus";
    import { getToken } from "@/utils/auth";
  
    import WangEditor from '@/components/WangEditor/index.vue'
  
  
  // import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
  // 获取文件上传token
  const hasToken = getToken();
  const Headers = {
    Authorization: hasToken ? hasToken : "",
  };
  
  const AddOrModify = ref(false);
  
  const state = reactive({
    total: 0,
    list: [],
  });
  
  const NewsTitle = ref("");
  const introduction_banner = ref("");
  
  // 新增抽屉
  const AddDrawer = ref(false);
  
  const introduction_banner1 = ref([]);
  
  const dialogImageUrl = ref("");
  const dialogVisible = ref(false);
  
  const ClickId = ref(0);
  
  const drawerID = ref(0);
  
  const editValue = ref("");
  
  const AddEditValue = ref("");
  
  const title = ref("");
  
  const introduction = ref("");
  
  const update_date = ref("");
  
  const drawer = ref(false);
  
  // 图片上传请求参数
  const UploadData = {
    key: "firstPage",
    Bucket: "images",
  };
  
  const Params = ref({
    title:'',
    name:'',
    details:'',
    images:'',
    specifications:'',//规格
    introduction:'',
    preid:'' //类型
  });
  
  // 新增新闻按钮
  const addNewsClick = () => {
    Params.value.title = "";
    Params.value.name = "";
    Params.value.price = '';
    introduction_banner1.value = [];
    AddEditValue.value = ''
    AddDrawer.value = true;
    AddOrModify.value = true;
    ruleForm.content = "";

    // drawerID.value = 1;
    // 
    // Params.value.title = "";
    // Params.value.ImageUrl = "";
    // Params.value.content = "";
    // Params.value.introduction = "";
    // Params.value.update_date = "";
    // ruleForm.content = "";
    // introduction_banner1.value = [];
  };
  
  const queryParams = ref({
    limit: 10,
    page: 1,
    title: "",
    total: 100,
  });

  const productName=ref('')
  
  // 打开查看详情抽屉
  const openPage = (row) => {
    drawer.value = true;
    console.log(row);
  
    title.value = row.title;
    productName.value = row.name
    introduction.value = row.introduction;
    update_date.value = row.update_date;
    introduction_banner.value = row.images;
    editValue.value = row.details;
  };
  
  const props = defineProps({
    // 父页面传递的数据
    dataRow: {
      type: Object,
      default: () => {
        return {
          title: "",
          languageType: 1,
          contentType: 1,
          content: "",
          remark: null,
        };
      },
    },
  });
  
  const ruleFormRef = ref();
  const ruleForm = reactive({
    content: "",
  });
  
  watch(
    props,
    (newUser, oldUser) => {
      if (props.dataRow && props.dataRow.id) {
        // 富文本回显
        ruleForm.content = props.dataRow.content;
        editValue.value = ruleForm.content;
      }
    },
    {
      deep: true,
      immediate: true,
    }
  );
  
  //当编辑器的内容更新时，获取该值
  const getRich = function (value) {
    ruleForm.content = value;
  };
  defineExpose({
    ruleForm,
  });
  
  // 提交保存
  const sumbitClick = () => {
    Params.value.details = ruleForm.content;
  
    if (AddOrModify.value) {
      const addParams = {
        title: Params.value.title,
        name: Params.value.name,
        details: Params.value.details,
        images: Params.value.images,
        introduction:Params.value.introduction,
        price:0
      };
  
      addProduct(addParams).then((res) => {
        console.log(res);
        if (res.code == 20000) {
          ElMessage({
            message: '新增成功',
            type: 'success',
          })
          AddDrawer.value = false;
          Params.value.title = "";
          Params.value.name = "";
          Params.value.details = "";
          Params.value.images = "";
          Params.value.introduction = "";
          ruleForm.content = ''
          introduction_banner1.value = [];
          getListPage();
        }
      });
    } else {
  
      const UpdataParams = {
        id: ClickId.value,
        title: Params.value.title,
        name: Params.value.name,
        details: ruleForm.content,
        images: Params.value.ImageUrl,
        introduction:Params.value.introduction,
        price:0
      };
  
      updateProduct(UpdataParams).then((res) => {
        console.log(res);
        if (res.code == 20000) {
          ElMessage({
            message: "修改成功",
            type: "success",
          });
          ClickId.value = 0;
          Params.value.title = '';
          Params.value.name = '';
          Params.value.details='';
          Params.value.images = '';
          Params.id = null
          CloseDrawer()
          ruleForm.content = "";
          introduction_banner1.value = [];
          Params.value.introduction = '';
          getListPage();
        }
      });
    }
  };
  
  // 关闭抽屉
  const CloseDrawer = () => {
    drawer.value = false;
    AddDrawer.value = false;
  };
  
  // 移除第一级轮播图片
  const introduction_handleRemove = (file) => {
    console.log(file);
    Params.value.images = ''
  };
  
  // 轮播第一级上传成功
  const introduction_handlePicturesSuccess = (uploadFile) => {
    console.log(uploadFile,55555);
    Params.value.images = uploadFile.data.url;
  };
  // 点击第一级轮播图片
  const introduction_handlePictureCardPreview = (file) => {
    // dialogImageUrl0.value = file.url!;
    // dialogVisible0.value = true;
  };
  
  // 删除新闻
  const deleteRow = (row) => {
    console.log(row);
    const deleteParams = {
      id: row.id,
    };
    deleteProduct(deleteParams).then((res) => {
      if (res.code == 20000) {
        ElMessage({
          message: "删除成功",
          type: "success",
        });
        getListPage();
      }
    });
  };
  
  // 修改
  const UpdataRow = (row) => {
    Params.value.title = row.title;
    Params.value.name = row.name;
  
    let ImageName = row.images.split("firstPage/")[1].split(".")[0];
  
    let ImageBanner = {
      name: ImageName,
      url: row.images,
    };
    Params.value.ImageUrl = row.images;
    introduction_banner1.value.push(ImageBanner);
    ClickId.value = row.id;
    ruleForm.content = row.details;
    AddEditValue.value = ruleForm.content;

    AddOrModify.value = false;
    AddDrawer.value = true;

  };
  
  // 获取列表
  const getListPage = async () => {
    const data = await getProductList(queryParams.value);
    console.log(data);
    state.list = data.data;
    state.total = data.total;
  };
  
  const reset = () =>{
    queryParams.value = {
      limit: 10,
      page: 1,
      title: "",
      total: 100,
    };
    getListPage()
  }
  
  // 初始化
  onMounted(() => {
    getListPage();
  });
  </script>
  
  <style lang="scss" scoped>
  .NewsPageBg {
    width: 100%;
    max-height: calc(100vh - 84px);
    overflow-y: auto;
    background-color: rgb(250, 250, 250);
    .label {
      display: flex;
      width: 320px;
      align-items: center;
      margin-top: 12px;
      margin-left: 12px;
      justify-content: space-between;
      .selectInput {
        width: 280px;
      }
    }
  
    .wangEditor {
      width: 98%;
    }
  
    .ClickBtnRow {
      width: 98%;
      margin-top: 12px;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  
    .ListBg {
      width: 98%;
      margin-top: 12px;
      margin-left: auto;
      margin-right: auto;
      height: 630px;
    }
  }
  </style>